import React, { useState, useEffect, useRef,useCallback } from "react";
import {
  userQuery,
  userDelById,
  userAdd,
  userUpdate,
} from "../service/userService";
import _ from "lodash";
import UserList from "../components/UserList";
import UserAdd from "../components/UserAdd";
import Dialog from "../components/Dialog";
import Search from "../components/Search";

export default function User() {
  const [list, setlist] = useState([]);

  const [editid, seteditid] = useState(0);

  let usernameInput = useRef();
  let userageInput = useRef();

  

//   let debounce = _.debounce; //找到防抖函数
//   let  queryList=useCallback(debounce(async (key)=>{
//         let { data } = await userQuery({
//                username_like: key,
//             }); //查看用户名中 是否包含key
//             setlist(data);

//   },2000),[]);
//上面是OK的
  

 // const [timer, settimer] = useState(null); //声明定时器
    let getList = async (key) => {
      let { data } = await userQuery({
        username_like: key,
      }); //查看用户名中 是否包含key
      setlist(data);
    };
  //调用lodash的防抖 失败
  let deBounceGetList = _.debounce(getList, 500); //表示这该函数0.5秒才会执行
  let queryList = (key) => {
    deBounceGetList(key);
  };



  //手写的 防抖
  //   let queryList = (key) => {
  //     setkey(key);
  //     clearTimeout(timer); //清除定时
  //     settimer(
  //       setTimeout(async () => {
  //         let { data } = await userQuery({
  //           username_like: key,
  //         }); //查看用户名中 是否包含key
  //         setlist(data);
  //       }, 2000)
  //     );
  //   };

  //curd  增删改查
  let confirm = async () => {
    await userUpdate(editid, {
      username: usernameInput.current.value,
      userage: userageInput.current.value,
    });

    setlist(
      list.map((item) => {
        if (item.id === editid) {
          item.username = usernameInput.current.value;
          item.userage = userageInput.current.value;
        }
        return item;
      })
    );

    setdialogInfo({
      ...dialogInfo,
      visible: false,
    });

    // //获取数据
    // alert(
    //   "更新的编号为:" +
    //   editid +
    //     "姓名" +
    //     usernameInput.current.value +
    //     "和" +
    //     userageInput.current.value
    // );
  };
  const [dialogInfo, setdialogInfo] = useState({
    visible: false,
    tip: "编辑的提示",
    content: (
      <div>
        <div>
          姓名 <input ref={usernameInput} />
        </div>
        <div>
          年龄 <input ref={userageInput} />
        </div>
      </div>
    ),
    cancel: () => {
      //取消的事件
      setdialogInfo({ ...dialogInfo, visible: false });
    },
  });

  useEffect(() => {
    userQuery({}).then((res) => {
      //给集合赋值
      setlist(res.data);
    });
  }, []);

  let listDelById = async (id) => {
    await userDelById(id);
    setlist(list.filter((item) => item.id !== id));
  };

  let listAdd = async (item) => {
    let res2 = await userQuery({ username: item.username });
    //根据用户名进行查询
    if (res2.data.length) {
      alert("该用户名已经存在");
      return false;
    }
    let res = await userAdd(item);
    //console.log(res);
    setlist([...list, res.data]);
  };

  let showDialog = (item) => {
    seteditid(item.id);

    // alert(eidtid);

    usernameInput.current.value = item.username;
    userageInput.current.value = item.userage;

    setdialogInfo({
      ...dialogInfo,
      visible: true,
    });
  };

  return (
    <div>
      <h3>用户管理</h3>
      <Dialog {...dialogInfo} confirm={confirm}></Dialog>
      <UserAdd listAdd={listAdd}></UserAdd>
      <hr />
      <Search queryList={queryList}></Search>
      <UserList
        list={list}
        showDialog={showDialog}
        listDelById={listDelById}
      ></UserList>
    </div>
  );
}
